<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
body{margin:10px;}
div{padding: 50px 40px;}
#div1{background-color: red;}
#div2{background-color: blue; /*position:relative; */}
#div3{background-color: yellow; position:relative; }
</style>
<script type="text/javascript">
window.onload = function (){
	var oDiv3 = document.getElementById('div3');
									//标准下			IE7			IE5
	alert(oDiv3.offsetTop)			//108				100			115
	alert(oDiv3.offsetLeft)			//88				80			90
	//当body当margin清掉时，则都是100px,80px
/*
	如果没有定位父级 => body
	
	如果有定位父级
		IE7以下：如果自己 没有定位，那么offsetTop是到body的距离
				 如果自己 有定位，那么就是到定位父级的距离

		其他：到定位父级的距离
*/
}
</script>
</head>
<body id="body1">
	<div id="div1">
		<div id="div2">
			<div id="div3"></div>
		</div>
	</div>
</body>
</html>